import React, { Component } from "react";
import { Menu } from "antd";
import menuList from "../../config/menuConfig";
import { Link, withRouter } from "react-router-dom";
const { SubMenu } = Menu;

class LeftMenu extends Component {
  getListNode(menuList) {
    return menuList.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key} icon={item.icon}>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {this.getListNode(item.children)}
          </SubMenu>
        );
      }
    });
  }

  render() {
    let selected = this.props.location.pathname;
    if (selected.indexOf("/product") === 0) {
      selected = "/product";
    }
    const opened = (
      selected === "/category" || selected === "/product" ? "goods" : ""
    )
      ? "goods"
      : selected === "/bar" || selected === "/line" || selected === "/pie"
      ? "pic"
      : "";
    return (
      <Menu
        selectedKeys={[selected]}
        defaultOpenKeys={[opened]}
        mode="inline"
        theme="dark"
      >
        {this.getListNode(menuList)}
        {/* <Menu.Item key="1" icon={<DesktopOutlined />}>
          首页
        </Menu.Item>

        <SubMenu key="2" icon={<MailOutlined />} title="商品">
          <Menu.Item key="5">品类管理</Menu.Item>
          <Menu.Item key="6">商品管理</Menu.Item>
        </SubMenu>
        <Menu.Item key="3" icon={<DesktopOutlined />}>
          用户管理
        </Menu.Item>
        <Menu.Item key="4" icon={<DesktopOutlined />}>
          角色管理
        </Menu.Item>
        <SubMenu key="7" icon={<AppstoreOutlined />} title="Navigation Two">
          <Menu.Item key="8">Option 9</Menu.Item>
          <Menu.Item key="9">Option 10</Menu.Item>
        </SubMenu> */}
      </Menu>
    );
  }
}
export default withRouter(LeftMenu);
